<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>商城后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">

    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>


    <!--    bootstrapTbale相关依赖     -------------------------------    -->


    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <!-- Lobibox CSS
   ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!--    jquery js-->
    <script src="js/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/jquery/jquery-migrate-1.0.0.js"></script>


    <!--bootstrap-->

    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <!-- Lobibox JS
============================================ -->
    <script src="js/notifications/Lobibox.js"></script>


    <!--    时间插件-->

    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
    <script src="js/bootstrap-datetimepicker.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>


</head>
<!--    获取前台用户的数据-->
<script>


    function getpages(name, gender, status, email, begin, end) {
        $('#boottable').bootstrapTable({
            url: 'http://localhost:8081/admin/getPageData.do',
            method: 'GET',
            // locale: 'zn-CN',
            columns: [
                {title: 'Id', field: 'uid', align: 'center'},
                {title: '姓名', field: 'uname', align: 'center'},
                {title: '性别', field: 'usex', align: 'center', formatter: formatSex},
                {title: '状态', field: 'ustatus', align: 'center', formatter: formatStatus},
                {title: '电话', field: 'uphone', align: 'center'},
                {title: '邮件', field: 'uemail', align: 'center'},
                {title: '注册日期', field: 'uregisterDate', align: 'center', formatter: formatRegisterDate},
                {title: '操作', align: 'center', formatter: addProcessBtns}
            ],
            queryParams: function (params) {

                // String name, String gender, Integer status, String email, Date beginRegisterDate, Date endRegisterDate, @RequestParam("offset") Integer beginIndex,@RequestParam("limit") Integer pageSize

                // console.log(name)
                // console.log(gender)
                console.log(status)
                // console.log(email)
                // console.log(begin)
                // console.log(end)
                params.name = name;
                params.gender = gender;
                params.status = status;

                params.email = email;
                params.beginRegisterDate = begin;
                params.endRegisterDate = end;

                return params;
            },
            pagination: true,
            sidePagination: 'server',
            locale: 'zh-CN'
        });

    }

    /**
     * 最终表格中显示的数据以该函数的返回值为准
     * value是当前格子的值。
     * row是当前行的数据。
     * index是当前数据的索引。
     */
    function formatSex(value, row, index) {
        return 'F' == value ? '女' : '男';
    }

    // 格式化状态
    function formatStatus(value) {
        // 1表示激活状态(要看数据库)
        if (value == 1) {
            return '<span class="label label-success">激活</span>'
        } else {
            return '<span class="label label-danger">未激活</span>'
        }
    }

    //格式化注册日期
    function formatRegisterDate(value) {
        // 使用moment这个库来完成日期的格式化
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }

    /**
     * 该方法会返回操作按钮：
     *      1. 查看用户所有的收货地址(必须的)。
     *      2. 对于未激活的用户, 得有激活按钮, 激活的用户不用加。
     */
    function addProcessBtns(value, row) {
        var btns = '<button class="btn btn-info btn-xs" onclick="showTakeDeliveryAddress(' + row.uid + ')">查看收货地址</button>' +
            '  <button onclick="showShoppingCartData(' + row.uid + ')" class="btn btn-primary btn-xs">查看购物车</button>';

        //如果用户是未激活状态, 添加激活按钮
        if (row.ustatus != 1) {
            btns += '  <button class="btn btn-success btn-xs" onclick="activeUser(' + row.uid + ')">激活</button>'
        } else {
            btns += '<button class="btn btn-danger btn-xs" onclick="logOutUser(' + row.uid + ')">取消激活</button>'
        }


        return btns;
    }

    // 查看收货地址
    function showTakeDeliveryAddress(userId) {
        // console.log(userId)
        $('#showAddressModal').modal('show');
        $('#addressDataTable').bootstrapTable({
            url: 'http://localhost:8081/address/getAddress.do',
            columns: [
                {field: 'aname', align: 'center', title: '收件人姓名'},
                {field: 'aphone', align: 'center', title: '收件人电话'},
                {field: 'adetail', align: 'center', title: '收货地址'},
                {
                    field: 'astate', align: 'center', title: '默认地址',
                    formatter: function (value) {
                        if (value == 1) {  //当value的值为1的时候，表示默认收货地址
                            return '<span class="label label-success">默认</span>';
                        }
                        return "否";
                    }
                }
            ],
            // var obj = {age: 10};  obj.name = 'zhangsan';
            queryParams: function (params) {
                params.userId = userId;
                // console.log(params);
                return params;
            }
        })
    }


    // 查看购物车
    function showShoppingCartData(userId) {
        // console.log(userId)
        $('#showAddressModa2').modal('show');
        $('#goodsDataTable').bootstrapTable({
            url: 'http://localhost:8081/cart/getCart.do',
            columns: [
                {field: 'goodId', align: 'center', title: '商品名称'},
                {field: 'num', align: 'center', title: '商品数量'},
                {field: 'createTime', align: 'center', title: '创建时间', formatter: formatShoppingTrolley}

            ],
            // var obj = {age: 10};  obj.name = 'zhangsan';
            queryParams: function (params) {
                params.userId = userId;
                // console.log(params);
                return params;
            }
        })
    }

    // 销毁表格, 然后隐藏模态窗
    function destoryTableAndHideModal() {
        $('#showAddressModal').modal('hide');
        // 因为模态窗中的表格, 没有分页，所以将数据直接缓存在客户端，当重新请求的时候并不会发送网络请求，
        // 导致看不同用户的收货地址的时候, 看到的数据是上一次的，所以每次影藏要将表格销毁掉。
        // https://www.bootstrap-table.com.cn/doc/api/methods/#destroy
        $('#addressDataTable').bootstrapTable('destroy'); // destroy是固定值
        $('#goodsDataTable').bootstrapTable('destroy');
        $('#showAddressModa2').modal('hide');
    }

    //格式化购物车时间
    function formatShoppingTrolley(value, row, index) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }

    // 激活用户
    function activeUser(userId) {
        $.ajax({
            url: 'http://localhost:8081/admin/activeUser.do',
            data: {userId: userId},
            dataType: 'json',
            type: 'get',
            // 激活的时候返回的json数据格式：{code: 1, msg: 'success'}
            success: function (_data) {
                // 代表激活成功，成功之后要重新加载表格的数据
                if (_data.code > 0) {
                    // 重新加载表格。 https://www.bootstrap-table.com.cn/doc/api/methods/#refresh
                    $('#boottable').bootstrapTable('refresh');
                } else { //激活失败, 提示用户
                    Lobibox.notify('info', {
                        msg: '激活失败, 请联系管理员',
                        size: 'mini',
                        delay: 2000,
                        delayIndicator: false,
                        title: false, //不给title
                        sound: false, // 不要音频
                        position: 'bottom left'
                    })
                }
            }
        })
    }


    // 取消激活用户
    function logOutUser(userId) {
        $.get({
            url: 'http://localhost:8081/admin/logOutUser.do',
            data: {userId: userId},
            dataType: 'json',
            // 取消激活的时候返回的json数据格式：{code: 1, msg: 'success'}
            success: function (_data) {
                // 代表取消激活成功，成功之后要重新加载表格的数据
                if (_data.code > 0) {
                    // 重新加载表格。 https://www.bootstrap-table.com.cn/doc/api/methods/#refresh
                    $('#boottable').bootstrapTable('refresh');
                } else { //取消激活失败, 提示用户
                    Lobibox.notify('info', {
                        msg: '取消失败, 请联系管理员',
                        size: 'mini',
                        delay: 2000,
                        delayIndicator: false,
                        title: false, //不给title
                        sound: false, // 不要音频
                        position: 'bottom left'
                    })
                }
            }
        })
    }

    // 搜索
    function querySearch() {




        $("#boottable").bootstrapTable('destroy');
        // 解决翻页之后, 还是停留在以前的页面问题, 使用selectPage, 意思是回到第一页
        // name,gender,status,email,begin,end
        var name = $('#name').val(); //获取name
        var gender = $('#gender').val(); //获取性别
        var status = $('#status').val(); //获取状态
        var email = $('#email').val();
        var begin = $('#beginRegisterDate').val();
        var end = $('#endRegisterDate').val();


        getpages(name, gender, status, email, begin, end);
    }

    //返回第一页
    function firstPage() {
        // 解决翻页之后, 还是停留在以前的页面问题, 使用selectPage, 意思是回到第一页
        $('#boottable').bootstrapTable('selectPage', 1);
    }


    /**
     * 重置搜索条件:
     *    1.将所有的搜索条件归位；
     *    2.刷新表格数据。
     */
    function resetSearch() {
        $("#boottable").bootstrapTable('destroy');
        var name = $('#name').val(''); //获取name
        var gender = $('#gender').val(''); //获取性别
        var status = $('#status').val(''); //获取状态
        var email = $('#email').val('');
        var begin = $('#beginRegisterDate').val('');
        var end = $('#endRegisterDate').val('');
        getpages(null, null, null, null, null, null);

    }

    $(function () {

        $.ajax({
            url: "/loginData.do",
            dataType:"json",
            success:function (data) {
                console.log(data.uname)

                $('#loginName').text(data.uname)
            }
        })


        $('#beginRegisterDate, #endRegisterDate').datetimepicker({
            // 格式化 yyyy-mm-dd hh:ii:ss 年-月-日 时-分-秒
            format: 'yyyy-mm-dd hh:ii:ss',
            autoclose: true,
            todayBtn: true,
            language: 'zh-CN'
        })

        getpages(null, null, null, null, null, null);
    })


    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false, // 不要音频
            position: 'bottom left'
        })
    }
</script>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->

<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li style="background-color: #f6f6f6"><a title="Dashboard v.1" href="/index.html"><span
                                    class="mini-sub-pro">用户列表</span></a>
                            </li>
                            <li><a title="Dashboard v.2" href="/goods.html"><span class="mini-sub-pro">商品列表</span></a>
                            </li>
                            <li><a title="Dashboard v.3" href="/index.html"><span class="mini-sub-pro">订单管理</span></a>
                            </li>
                            <li><a title="Dashboard v.4" href="/categoryManagement.html"><span
                                    class="mini-sub-pro">类目管理</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="events.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span>
                            <span class="mini-click-non">系统用户</span></a>
                    </li>
                    <li>
                        <a class="has-arrow" href="all-professors.html" aria-expanded="false"><span
                                class="fa fa-cogs"></span> <span class="mini-click-non">系统管理</span></a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="all-professors.html"><span class="mini-sub-pro">菜单管理</span></a></li>
                            <li><a href="add-professor.html"><span class="mini-sub-pro">角色管理</span></a></li>
                            <li><a href="edit-professor.html"><span class="mini-sub-pro">字典管理</span></a></li>
                            <li><a href="professor-profile.html"><span class="mini-sub-pro">权限管理</span></a></li>
                        </ul>
                    </li>

                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
                                    <div class="header-top-menu tabl-d-n">
                                        <ul class="nav navbar-nav mai-top-nav">
                                            <li class="nav-item"><a href="#" class="nav-link">Home</a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link">About</a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link">Services</a>
                                            </li>
                                            <li class="nav-item dropdown res-dis-nn">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">Project <span
                                                        class="angle-down-topmenu"><i
                                                        class="fa fa-angle-down"></i></span></a>
                                                <div role="menu" class="dropdown-menu animated zoomIn">
                                                    <a href="#" class="dropdown-item">Documentation</a>
                                                    <a href="#" class="dropdown-item">Expert Backend</a>
                                                    <a href="#" class="dropdown-item">Expert FrontEnd</a>
                                                    <a href="#" class="dropdown-item">Contact Support</a>
                                                </div>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link">Support</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">
                                                    <img src="img/product/pro4.jpg" alt=""/>
                                                    <span class="admin-name" id="loginName" ></span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                    <li><a href="#"><span
                                                            class="edu-icon edu-home-admin author-log-ic"></span>My
                                                        Account</a>
                                                    </li>
                                                    <li><a href="#"><span
                                                            class="edu-icon edu-user-rounded author-log-ic"></span>My
                                                        Profile</a>
                                                    </li>
                                                    <li><a href="#"><span
                                                            class="edu-icon edu-money author-log-ic"></span>User Billing</a>
                                                    </li>
                                                    <li><a href="#"><span
                                                            class="edu-icon edu-settings author-log-ic"></span>Settings</a>
                                                    </li>
                                                    <li><a href="#"><span
                                                            class="edu-icon edu-locked author-log-ic"></span>Log Out</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Mobile Menu start -->
        <div class="mobile-menu-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="mobile-menu">
                            <nav id="dropdown">
                                <ul class="mobile-menu-nav">
                                    <li><a data-toggle="collapse" data-target="#Charts" href="#">Home <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul class="collapse dropdown-header-top">
                                            <li><a href="index.html">Dashboard v.1</a></li>
                                            <li><a href="index-1.html">Dashboard v.2</a></li>
                                            <li><a href="index-3.html">Dashboard v.3</a></li>
                                            <li><a href="analytics.html">Analytics</a></li>
                                            <li><a href="widgets.html">Widgets</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="events.html">Event</a></li>
                                    <li><a data-toggle="collapse" data-target="#demoevent" href="#">Professors <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="demoevent" class="collapse dropdown-header-top">
                                            <li><a href="all-professors.html">All Professors</a>
                                            </li>
                                            <li><a href="add-professor.html">Add Professor</a>
                                            </li>
                                            <li><a href="edit-professor.html">Edit Professor</a>
                                            </li>
                                            <li><a href="professor-profile.html">Professor Profile</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#demopro" href="#">Students <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="demopro" class="collapse dropdown-header-top">
                                            <li><a href="all-students.html">All Students</a>
                                            </li>
                                            <li><a href="add-student.html">Add Student</a>
                                            </li>
                                            <li><a href="edit-student.html">Edit Student</a>
                                            </li>
                                            <li><a href="student-profile.html">Student Profile</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#democrou" href="#">Courses <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="democrou" class="collapse dropdown-header-top">
                                            <li><a href="all-courses.html">All Courses</a>
                                            </li>
                                            <li><a href="add-course.html">Add Course</a>
                                            </li>
                                            <li><a href="edit-course.html">Edit Course</a>
                                            </li>
                                            <li><a href="course-profile.html">Courses Info</a>
                                            </li>
                                            <li><a href="course-payment.html">Courses Payment</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#demolibra" href="#">Library <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="demolibra" class="collapse dropdown-header-top">
                                            <li><a href="library-assets.html">Library Assets</a>
                                            </li>
                                            <li><a href="add-library-assets.html">Add Library Asset</a>
                                            </li>
                                            <li><a href="edit-library-assets.html">Edit Library Asset</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#demodepart" href="#">Departments <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="demodepart" class="collapse dropdown-header-top">
                                            <li><a href="departments.html">Departments List</a>
                                            </li>
                                            <li><a href="add-department.html">Add Departments</a>
                                            </li>
                                            <li><a href="edit-department.html">Edit Departments</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#demo" href="#">Mailbox <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="demo" class="collapse dropdown-header-top">
                                            <li><a href="mailbox.html">Inbox</a>
                                            </li>
                                            <li><a href="mailbox-view.html">View Mail</a>
                                            </li>
                                            <li><a href="mailbox-compose.html">Compose Mail</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Miscellaneousmob" href="#">Interface
                                        <span class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="Miscellaneousmob" class="collapse dropdown-header-top">
                                            <li><a href="google-map.html">Google Map</a>
                                            </li>
                                            <li><a href="data-maps.html">Data Maps</a>
                                            </li>
                                            <li><a href="pdf-viewer.html">Pdf Viewer</a>
                                            </li>
                                            <li><a href="x-editable.html">X-Editable</a>
                                            </li>
                                            <li><a href="code-editor.html">Code Editor</a>
                                            </li>
                                            <li><a href="tree-view.html">Tree View</a>
                                            </li>
                                            <li><a href="preloader.html">Preloader</a>
                                            </li>
                                            <li><a href="images-cropper.html">Images Cropper</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Chartsmob" href="#">Charts <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="Chartsmob" class="collapse dropdown-header-top">
                                            <li><a href="bar-charts.html">Bar Charts</a>
                                            </li>
                                            <li><a href="line-charts.html">Line Charts</a>
                                            </li>
                                            <li><a href="area-charts.html">Area Charts</a>
                                            </li>
                                            <li><a href="rounded-chart.html">Rounded Charts</a>
                                            </li>
                                            <li><a href="c3.html">C3 Charts</a>
                                            </li>
                                            <li><a href="sparkline.html">Sparkline Charts</a>
                                            </li>
                                            <li><a href="peity.html">Peity Charts</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Tablesmob" href="#">Tables <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="Tablesmob" class="collapse dropdown-header-top">
                                            <li><a href="static-table.html">Static Table</a>
                                            </li>
                                            <li><a href="data-table.html">Data Table</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#formsmob" href="#">Forms <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="formsmob" class="collapse dropdown-header-top">
                                            <li><a href="basic-form-element.html">Basic Form Elements</a>
                                            </li>
                                            <li><a href="advance-form-element.html">Advanced Form Elements</a>
                                            </li>
                                            <li><a href="password-meter.html">Password Meter</a>
                                            </li>
                                            <li><a href="multi-upload.html">Multi Upload</a>
                                            </li>
                                            <li><a href="tinymc.html">Text Editor</a>
                                            </li>
                                            <li><a href="dual-list-box.html">Dual List Box</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Appviewsmob" href="#">App views <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="Appviewsmob" class="collapse dropdown-header-top">
                                            <li><a href="basic-form-element.html">Basic Form Elements</a>
                                            </li>
                                            <li><a href="advance-form-element.html">Advanced Form Elements</a>
                                            </li>
                                            <li><a href="password-meter.html">Password Meter</a>
                                            </li>
                                            <li><a href="multi-upload.html">Multi Upload</a>
                                            </li>
                                            <li><a href="tinymc.html">Text Editor</a>
                                            </li>
                                            <li><a href="dual-list-box.html">Dual List Box</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Pagemob" href="#">Pages <span
                                            class="admin-project-icon edu-icon edu-down-arrow"></span></a>
                                        <ul id="Pagemob" class="collapse dropdown-header-top">
                                            <li><a href="login.html">Login</a>
                                            </li>
                                            <li><a href="register.html">Register</a>
                                            </li>
                                            <li><a href="lock.html">Lock</a>
                                            </li>
                                            <li><a href="password-recovery.html">Password Recovery</a>
                                            </li>
                                            <li><a href="404.html">404 Page</a></li>
                                            <li><a href="500.html">500 Page</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <div style="background-color: #f5f5f5eb ;">
        <!--    <div class="container-fluid" style="padding: 20px 15px 0 15px;">-->
        <!--        搜索栏-->

        <div style="height: 12px"></div>
        <div style="background-color: #ffffff; border-radius: 3px;margin: 12px;">
            <div style="padding-top: 2%; padding-left: 5%">
                <form class="form-inline" onsubmit="javascript: return false;">
                    <div class="form-group">
                        <label for="name">用户名: </label>
                        <input autocomplete="off" class="form-control" id="name">
                    </div>
                    <div class="form-group">
                        <label for="gender">性别: </label>
                        <select class="form-control" id="gender">
                            <option value="">全部</option>
                            <option value="F">女</option>
                            <option value="M">男</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="status">状态: </label>
                        <select class="form-control" id="status">
                            <option value="">全部</option>
                            <option value="1">激活</option>
                            <option value="0">未激活</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="email">邮件: </label>
                        <input autocomplete="off" class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <label>注册日期: </label>
                        <input class="form-control" readonly autocomplete="off" id="beginRegisterDate"> -
                        <input autocomplete="off" readonly class="form-control" id="endRegisterDate">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-danger" onclick="querySearch()">搜索</button>
                        <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
                    </div>
                </form>

            </div>
            <!--
            额外加一列，写个按钮查看用户的地址信息。
            -->
            <table id="dataTable" class="table table-hover table-bordered"></table>
            <div class="modal" id="showAddressModal" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" onclick="destoryTableAndHideModal()">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">收货地址</h3>
                        </div>
                        <div class="modal-body">
                            <table id="addressDataTable" class="table table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>


            <!--
        额外加一列，写个按钮查看用户的购物车。
        -->
            <table id="goodsTable" class="table table-hover table-bordered"></table>
            <div class="modal" id="showAddressModa2" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" onclick="destoryTableAndHideModal()">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title">购物车信息</h3>
                        </div>
                        <div class="modal-body">
                            <table id="goodsDataTable" class="table table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>


            <!--        bootstarptable用户信息管理-->
            <!--        data-toggle="table" data-locale="zh-CN"-->

            <table id="boottable" class="table table-hover table-bordered" data-locale="zh-CN"
                   style="margin: 0% 0.5%;width: 99%">
            </table>


        </div>
        <div style="height: 200px;"></div>
    </div>



    <!--        底部结尾-->
    <div class="footer-copyright-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-copy-right">
                        <p>Copyright © 2018. All rights reserved. Template by <a
                                href="https://colorlib.com/wp/templates/">Colorlib</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- wow JS
    ============================================ -->
<script src="js/wow.min.js"></script>
<!-- price-slider JS
    ============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- meanmenu JS
    ============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- owl.carousel JS
    ============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- sticky JS
    ============================================ -->
<script src="js/jquery.sticky.js"></script>
<!-- scrollUp JS
    ============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- counterup JS
    ============================================ -->
<script src="js/counterup/jquery.counterup.min.js"></script>
<script src="js/counterup/waypoints.min.js"></script>
<script src="js/counterup/counterup-active.js"></script>
<!-- mCustomScrollbar JS
    ============================================ -->
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/scrollbar/mCustomScrollbar-active.js"></script>
<!-- metisMenu JS
    ============================================ -->
<script src="js/metisMenu/metisMenu.min.js"></script>
<script src="js/metisMenu/metisMenu-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="js/morrisjs/raphael-min.js"></script>
<script src="js/morrisjs/morris.js"></script>
<script src="js/morrisjs/morris-active.js"></script>
<!-- morrisjs JS
    ============================================ -->
<script src="js/sparkline/jquery.sparkline.min.js"></script>
<script src="js/sparkline/jquery.charts-sparkline.js"></script>
<script src="js/sparkline/sparkline-active.js"></script>
<!-- calendar JS
    ============================================ -->
<script src="js/calendar/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script src="js/calendar/fullcalendar-active.js"></script>
<!-- plugins JS
    ============================================ -->
<script src="js/plugins.js"></script>
<!-- main JS
    ============================================ -->
<script src="js/main.js"></script>
<!-- tawk chat JS
    ============================================ -->
<script src="js/tawk-chat.js"></script>


</body>

</html>